<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .upload{

        }
        .fileDiv{
            width: 100px;
            height: 40px;
            background-color: #00a2d4;
            line-height: 40px;
            text-align: center;
            color: #FFF;
            border-radius: 3px;
            position: relative;
            overflow: hidden;
        }
        .fileDiv input{
            width: 100px;
            height: 40px;
            background-color: #FFF;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
            -ms-filter: 'alpha(opacity=0)';
        }
    </style>
</head>
<body>
  <form action="/upload" method="post" enctype="multipart/form-data">
      <div class="fileDiv">
          <span>选择文件</span>
          <input  class="upload" type="file" name="file" value="上传图片"  onchange="previewFile()">
      </div>
      <img src="" height="200" width="300" alt="Image preview..."  />
    <input type="submit" value="提交">
  </form>

  <script type="text/javascript">
      function previewFile() {
          console.log("数值改变")
          var preview = document.querySelector('img');
          console.log(preview.height)
          var file  = document.querySelector('input[type=file]').files[0];
          var reader = new FileReader();
          reader.onloadend = function () {
              preview.src = reader.result;
          }
          if (file) {
              reader.readAsDataURL(file);
          } else {
              preview.src = "";
          }
      }
  </script>
</body>

</html>